<template>
    <!-- v-for的数字循环 -->
    <div v-for="number in 5">{{ number }}</div>
    <!-- v-for的数组循环 -->
    <div v-for="( name,index ) in hero"> {{ index + 6 }} {{ name }} </div>
    <!-- v-for的对象循环 -->
    <div v-for="( v,k,index ) in xiaoYan"> {{ index + 11 }} {{ k }} {{ v }}</div>
    <!-- v-for中的key属性 -->
    <!-- key的属性值要确保唯一 -->
    <div v-for="item in ultimate" :key="item.id"><input type="checkbox">{{ item.name }}</div>
    <button @click="addUltimate">添加技能</button>
</template>

<script setup>
import { ref } from 'vue'
const hero = ref(["萧炎","王林","韩立","古月方源","陈平安"])
const xiaoYan = ref({name: "萧炎",exercises: "焚决",skill: "佛怒火莲"})
const ultimate = ref([
    {id: 1,name: "齐衡三"},
    {id: 2,name: "火烷"},
    {id: 3,name: "毁灭火莲"},
    {id: 4,name: "猖狂"},
    {id: 5,name: "剑来"}
])
const addUltimate = () => {
    ultimate.value.unshift({id: 6,name: "法天相地"})
}
</script>
